/**
 * 鼠标位置和RGB颜色追踪工具
 * 用于图像标注页面实时显示鼠标坐标和当前像素的RGB值
 */

import { ref, onUnmounted } from 'vue'

export function useMouseTracker() {
  // 鼠标位置和RGB数据
  const mousePosition = ref({ 
    x: 0, 
    y: 0, 
    rgb: '0,0,0',
    hex: '#000000'
  })
  
  // Canvas元素用于获取像素RGB值
  let canvas = null
  let ctx = null
  let imageElement = null
  
  /**
   * 初始化Canvas用于RGB采样
   */
  const initCanvas = () => {
    if (!canvas) {
      canvas = document.createElement('canvas')
      ctx = canvas.getContext('2d')
    }
  }
  
  /**
   * 从图像坐标获取RGB值
   * @param {number} x - 图像上的x坐标
   * @param {number} y - 图像上的y坐标
   * @returns {object} RGB值对象
   */
  const getRGBFromImage = (x, y) => {
    if (!imageElement || !ctx || x < 0 || y < 0) {
      return { r: 0, g: 0, b: 0 }
    }
    
    try {
      // 确保canvas尺寸与图像一致
      if (canvas.width !== imageElement.naturalWidth || canvas.height !== imageElement.naturalHeight) {
        canvas.width = imageElement.naturalWidth
        canvas.height = imageElement.naturalHeight
        ctx.drawImage(imageElement, 0, 0)
      }
      
      // 获取指定位置的像素数据
      const imageData = ctx.getImageData(x, y, 1, 1)
      const data = imageData.data
      
      return {
        r: data[0],
        g: data[1], 
        b: data[2]
      }
    } catch (error) {
      console.warn('[MouseTracker] 获取RGB失败:', error)
      return { r: 0, g: 0, b: 0 }
    }
  }
  
  /**
   * RGB转十六进制
   * @param {number} r - 红色值
   * @param {number} g - 绿色值  
   * @param {number} b - 蓝色值
   * @returns {string} 十六进制颜色值
   */
  const rgbToHex = (r, g, b) => {
    return '#' + [r, g, b].map(x => {
      const hex = x.toString(16)
      return hex.length === 1 ? '0' + hex : hex
    }).join('')
  }
  
  /**
   * 将屏幕坐标转换为图像坐标
   * @param {MouseEvent} event - 鼠标事件
   * @returns {object} 图像坐标
   */
  const getImageCoordinates = (event) => {
    if (!imageElement) return { x: 0, y: 0 }
    
    const rect = imageElement.getBoundingClientRect()
    const scaleX = imageElement.naturalWidth / rect.width
    const scaleY = imageElement.naturalHeight / rect.height
    
    const x = Math.floor((event.clientX - rect.left) * scaleX)
    const y = Math.floor((event.clientY - rect.top) * scaleY)
    
    return { 
      x: Math.max(0, Math.min(x, imageElement.naturalWidth - 1)),
      y: Math.max(0, Math.min(y, imageElement.naturalHeight - 1))
    }
  }
  
  /**
   * 鼠标移动事件处理
   * @param {MouseEvent} event - 鼠标事件
   */
  const handleMouseMove = (event) => {
    if (!imageElement) return
    
    // 获取图像坐标
    const { x, y } = getImageCoordinates(event)
    
    // 获取RGB值
    const { r, g, b } = getRGBFromImage(x, y)
    const hex = rgbToHex(r, g, b)
    
    // 更新鼠标位置数据
    mousePosition.value = {
      x,
      y,
      rgb: `${r},${g},${b}`,
      hex,
      r,
      g, 
      b
    }
  }
  
  /**
   * 图像加载完成事件处理
   */
  const handleImageLoad = () => {
    if (imageElement && imageElement.complete) {
      initCanvas()
      // 重新绘制图像到canvas
      canvas.width = imageElement.naturalWidth
      canvas.height = imageElement.naturalHeight
      ctx.drawImage(imageElement, 0, 0)
    }
  }
  
  /**
   * 设置要追踪的图像元素
   * @param {HTMLImageElement} imgElement - 图像元素
   */
  const setImageElement = (imgElement) => {
    // 移除旧的事件监听器
    if (imageElement) {
      imageElement.removeEventListener('mousemove', handleMouseMove)
      imageElement.removeEventListener('load', handleImageLoad)
    }
    
    imageElement = imgElement
    
    if (imageElement) {
      initCanvas()
      
      // 添加事件监听器
      imageElement.addEventListener('mousemove', handleMouseMove)
      imageElement.addEventListener('load', handleImageLoad)
      
      // 如果图像已加载，立即处理
      if (imageElement.complete) {
        handleImageLoad()
      }
    }
  }
  
  /**
   * 重置鼠标位置数据
   */
  const resetPosition = () => {
    mousePosition.value = { 
      x: 0, 
      y: 0, 
      rgb: '0,0,0',
      hex: '#000000',
      r: 0,
      g: 0,
      b: 0
    }
  }
  
  /**
   * 清理资源
   */
  const cleanup = () => {
    if (imageElement) {
      imageElement.removeEventListener('mousemove', handleMouseMove)
      imageElement.removeEventListener('load', handleImageLoad)
    }
    imageElement = null
    canvas = null
    ctx = null
  }
  
  // 组件卸载时清理
  onUnmounted(() => {
    cleanup()
  })
  
  return {
    mousePosition,
    setImageElement,
    resetPosition,
    cleanup,
    // 暴露工具方法供外部使用
    getRGBFromImage,
    getImageCoordinates,
    rgbToHex
  }
}